<template>
  <div class="model">
    <div>
      <div class="toolItem">
        <svg class="icon-third" aria-hidden="true" style="font-size: 5px">
          <use xlink:href="#icon-third-youxuan3"></use>
        </svg>
        <span class="toolTitle">问卷调查</span>
		<span style="position:absolute;right:5px;">更多></span>
      </div>
      <div class="flex index-quest">
		  <ul>
		  	<li v-for="article in newsList">
		  		<h3>
		  			<router-link :to="`/news/detail/${article.id}`" target="_blank">
						<div class="news-img">
							<img :src="article.coverImg" alt="">
						</div>
						<div class="news-content">
							<p>{{article.title}}</p>
							<p style="position:absolute;bottom:0;"><span>{{ article.createTime.substr(0,10) }}
							</span></p>
						</div>
		  			  
		  			</router-link>
		  			
		  		</h3>
		  	</li>
		  </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import defaultImg from "@/assets/img/bg.png";
const newsList = ref<any>([
	{
		id:'83',
		title: '2023年税务师备考培训网络班开班啦！',
		remark: '税务师职业资格证书实行登记服务制度，税务师职业资格证书登记服务的具体工作由全国税务师行业协会负责',
		coverImg: defaultImg,
		createTime : '2023-12-22 00:00:00'
	},
	{
		id:'84',
		title: '2023年二级建造师拿证考前直播密训班开课啦！！',
		remark: '二级建造师执业资格考试合格者，由省、自治区、直辖市人事部门和住建部门颁发《中华人民共和国二级建造师执业资格证书》。取得建造师执业资格证书经过注册登记后，即获得二级建造师注册证书，注册后的建造师方可受聘执业。二级建造师考试科目有三门。',
		coverImg: defaultImg,
		createTime : '2023-10-09 00:00:00'
	},
	{
		id:'85',
		title: '帆航教育助您备考执业药师，教材解析，结构式学习，冲刺宝典，高频考点，等您领取！',
		remark: '执业药师是负责提供药物知识及药事服务的专业人员。药剂师负责审核医生所处方的数种药物中有否出现药物相互作用，并根据病人的病历、医生的诊断，为病人建议最适合他们的药物剂型、剂量。同一时间，他们亦会教导病人服用药物时要注意的事项和服用方法',
		coverImg: defaultImg,
		createTime : '2023-11-23 00:00:00'
	},
	{
		id:'71',
		title: '执业药师直播密训班来了！！助你快速提分一次上岸！！',
		remark: '在药品生产、经营、使用和其他需要提供药学服务的单位中执业的药学技术人员。执业药师是负责提供药物知识及药事服务的专业人员。',
		coverImg: defaultImg,
		createTime : '2023-12-23 00:00:00'
	},
]); // 商品列表

const pageInfo = ref<{
  pageNo: number;
  pageSize: number;
  courseName: string;
}>({
  pageNo: 1,
  pageSize: 8,
  courseName: ""
});

onMounted(() => {
});


</script>

<style scoped lang="scss">
@import "@/assets/style/course/global.scss";


.toolItem {
  display: flex;
  align-items: center;
  margin: 20px 0;
  position:relative;
}

.toolTitle {
  font-size: 16px;
  margin-left: 5px;
}
.index-news{
	ul{
		overflow:hidden;
		li{
			width:49%;
			overflow:hidden;
			float:left;
			margin-bottom:15px;
			&:nth-child(2n){
				margin-left:2%;
			}
			h3{
				height: 100%;
				overflow: hidden;
				position: relative;
				a{
					color:#333333;
					.news-img{
						width:40%;
						float:left;
						img{
							width:100%;
							height:140px;
							border-radius:8px;
						}
					}
					.news-content{
						width:58%;
						float:right;
					}
				}
			}
			
			
		}
	}
}

.index-quest{
	background-color:url(defaultImg)
}
</style>
